更明确的语义支持

在 HTML5 以前，如果要表达一个文档结构，可能只能通过<div...>元素来实现。例如定义如下页面结构：

<div id="header">...</div>
<div id="nav">...</div>
<div id="article">
	<div id="section">
		...
	</div>
</div>
<div id="aside">...</div>
<div id="footer">...</div>

在上面的页面结构中，所有的页面元素都采用<div...>元素来实现，不同<div...>元素的 id 不同，不同 id 的<div...>元素代表不同含义，但这种采用<div...>布局的方式导致缺乏明确的语义——因为所有内容都是<div...>元素。

HTML5 则为上面的页面布局提供了更明确的语义元素，此时可以将上面的页面片段改为如下形式：

<header>...</header>
<nav>...</nav>
<article>
    <section>
    	...
	</section>
</article>
<aside>...</aside>
<footer>...</footer>

上面的页面片段就可以提供更清晰的语义了，而不是通过语义不清的<div...>元素来完成布局。

除此之外，以前的 HTML 可能会通过<em...>元素来表示“被强调”的内容，但到底是哪一种强调，HTML 却无法表达；HTML5 则提供了更多支持语义的强调元素，例如：

<time>2022-10-16</time>
<mark>被标记的文本</mark>

上面的第一个<time...>元素用于强调被标记的内容是日期或时间，而<mark...>元素则用于强调被标记的文本。HTML5 新增的这两个元素比<em...>元素提供了更丰富的语义。